<template>
  <div>
    {{ list }} <br />
    <h3>收集学员信息区域</h3>
    学员姓名 <br />
    <input type="text" v-model="list.name" /> <br />
    学员手机号 <br />
    <input type="text" v-model="list.phone" />

    <br />
    <button @click="but" v-if="show">提交</button>

    <button @click="edit" v-else>修改</button>

    <button @click="clear">重置</button>
  </div>
</template>

<script setup>
import emitter from "../../utils/bus";
import { onMounted, reactive } from "vue";
const emits = defineEmits(["channel"]); //通过defineEmits方法接受父组件传递的事件

let list = reactive({
  name: "",
  phone: "",
  data: new Date(),
  index:''
});
function but() {
  emitter.emit("channel", JSON.parse(JSON.stringify(list)));
}
function clear() {
  (list.name = ""), (list.phone = "");
  show = true;
}
let show = true;
onMounted(() => {
  emitter.on("bj", (item) => {
    (list.name = item.item.name), (list.phone = item.item.phone);
    show = false;
    list.name=item.item.name
    list.name=item.item.name
    list.index=item.index
    console.log(list);
  });
});

function edit() {
    emitter.emit('edit1',list)
}
</script> 
  
<style></style>